<template>
	<view :style="theme">
		<view class="content" :style="{height:btom}">
			<view class="u-demo-block">
				<view class="formLi">
					<view class="label f28 c1 fw5">收件人</view>
					<view class="formCnt">
						<u--input v-model="model1.receiverName" fontSize="30rpx" border="none" placeholder="请输入收件人姓名"
							clearable maxlength="10">
						</u--input>
					</view>
				</view>
				<view class="formLi">
					<view class="label f28 c1 fw5">联系电话</view>
					<view class="formCnt">
						<u--input v-model="model1.receiverPhone" type="number" fontSize="30rpx" border="none"
							placeholder="请输入联系电话" clearable maxlength="11">
						</u--input>
					</view>
				</view>
				<view class="formLi" @click="open">
					<view class="label f28 c1 fw5">所在地区</view>
					<view class="formCnt flex flex_between">
						<u--input v-model="model1.addressName" fontSize="30rpx" border="none" placeholder="请选择所在地区">
						</u--input>
						<u-icon name="arrow-right" color="#999999" size="26rpx"></u-icon>
						<view class="fg"></view>
					</view>
				</view>
				<view class="formLi">
					<view class="label f28 c1 fw5">详细地址</view>
					<view class="formCnt">
						<textarea class="textarea" v-model="model1.address" maxlength="100"
							placeholder-style="color: #c0c4cc;" placeholder="请输入详情地址" />
						</textarea>
					</view>
				</view>
				<view class="formLi">
					<view class="flex flex_between" style="width: 100%;">
						<text class="c2">设为默认地址</text>
						<u-switch v-model="model1.istrue" activeColor="var(--color)"></u-switch>
					</view>
				</view>
				<view class="foot" :class="id?'on':''">
					<view v-if="id" class="foot_btn foot_btnb" @click="showModel= true">删除</view>
					<view class="foot_btn" @click="$noMultipleClicks(submit)">{{id?'保存':"提交"}}</view>
				</view>
			</view>
		</view>
		<u-modal :show="showModel" @confirm="removeAddr" @cancel="showModel = false" :showCancelButton="true"
			confirmColor="#AB50F6" :closeOnClickOverlay="true" title="确定要删除该地址吗？" ref="uModal" :asyncClose="true">
		</u-modal>
		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm"
			@cancel="cancel" :visible="visible" />
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				btom: "",
				showModel: false,
				noClick: true,
				model1: {
					istrue: false,
					addressNameList: []
				},
				id: '',
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '',
				column: 3
			}
		},
		onLoad(ops) {
			this.btom = uni.getWindowInfo().windowHeight + "px"
			if (ops.id) {
				this.id = ops.id
				this.addrDetail()
				this.setTitle('编辑新地址')
			} else {
				this.setTitle('添加新地址')
			}
		},
		methods: {
			setTitle(title) {
				this.$app.setTitle(title);
			},
			open() {
				if (this.model1.addressNameList && this.model1.addressNameList.length > 0) {
					this.defaultValue = this.model1.addressNameList
				} else {
					this.defaultValue = ''
				}
				this.visible = true
			},
			confirm(val) {
				console.log(val)
				this.$set(this.model1, 'addressName', val.name)
				this.$set(this.model1, 'addressNameList', [val.provinceName, val.cityName, val.areaName])
				this.visible = false
			},
			cancel() {
				this.visible = false
			},
			addrDetail() {
				this.$app.ajax({
					data: {
						param: {
							id: this.id
						}
					},
					api: this.$api.addressDetail(),
				}).then((res) => {
					if (res.errorCode == '000000') {
						let obj = res.record
						obj.addressNameList = [obj.province, obj.city, obj.area]
						obj.addressName = obj.province + obj.city + obj.area
						obj.id = this.id
						if (obj.isDefault == '1') {
							obj.istrue = true
						} else {
							obj.istrue = false
						}
						this.model1 = obj
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			removeAddr() {
				this.$app.ajax({
					data: {
						param: {
							id: this.id
						}
					},
					api: this.$api.addressDel(),
				}).then((res) => {
					this.showModel = false
					if (res.errorCode == '000000') {
						this.$app.showToast('删除成功')
						uni.navigateBack({
							delta: 1
						})
					}
				}).catch((err) => {
					this.showModel = false
					console.log('err', err)
				})
			},
			submit() {
				let that = this
				if (!this.model1.receiverName) {
					this.$app.showToast('请填写收件人')
					return false
				}
				if (!this.model1.receiverPhone) {
					this.$app.showToast('请填写联系电话')
					return false
				}
				if (!this.model1.addressNameList || this.model1.addressNameList.length == 0) {
					this.$app.showToast('请选择所属省市区')
					return false
				}
				if (!this.model1.address) {
					this.$app.showToast('请输入详细地址')
					return false
				}
				if (that.id) {
					that.updateAddr()
				} else {
					that.saveAddr()
				}
			},
			updateAddr() {
				let obj = {
					...this.model1
				}
				this.$app.ajax({
					data: {
						param: {
							id: this.id,
							address: obj.address,
							receiverPhone: obj.receiverPhone,
							receiverName: obj.receiverName,
							area: obj.addressNameList[2],
							city: obj.addressNameList[1],
							isDefault: obj.istrue ? '1' : '0',
							province: obj.addressNameList[0]
						}
					},
					api: this.$api.addressUpdate(),
				}).then((res) => {
					if (res.errorCode == '000000') {
						this.$app.showToast('修改地址成功')
						uni.navigateBack({
							delta: 1
						})
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
			saveAddr() {
				let obj = {
					...this.model1
				}
				this.$app.ajax({
					data: {
						param: {
							address: obj.address,
							receiverPhone: obj.receiverPhone,
							area: obj.addressNameList[2],
							city: obj.addressNameList[1],
							isDefault: obj.istrue ? '1' : '0',
							receiverName: obj.receiverName,
							province: obj.addressNameList[0]
						}
					},
					api: this.$api.addressAdd(),
				}).then((res) => {
					if (res.errorCode == '000000') {
						this.$app.showToast('添加地址成功')
						uni.navigateBack({
							delta: 1
						})
					}
				}).catch((err) => {
					console.log('err', err)
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		max-height: 100vh;
		box-sizing: border-box;
	}

	.u-demo-block {
		box-sizing: border-box;
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 32rpx;
		height: calc(100% - 20rpx);
		padding: 30rpx;
		position: relative;
	}

	.formCnt {
		border-bottom: 1px solid #E5E5E5;
		box-sizing: border-box;
		padding: 26rpx 0;
		margin-bottom: 28rpx;
		position: relative;

		.fg {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			z-index: 99;
		}

		textarea {
			font-size: 30rpx;
			padding: 0;
			height: 220rpx;
			background: none;
		}
	}


	.foot {
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		z-index: 999;

		&.on {
			display: flex;
			justify-content: space-between;

			view {
				width: 304rpx;
			}
		}

		.foot_btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: $color;
			border-radius: 44rpx;
			border: 1px solid #111111;
			color: #fff;

			&.foot_btnb {
				background: #fff;
				color: $color;
			}
		}

	}
</style>